<template>
   <div id="Card" v-if="article" @click="ToArticleDetail(article?.id)">
      <!-- 头部 -->
       <div id="Head"  class="overflow flex">
          <div id="title" class="overflow">{{article?.username}}</div>
          <div id="subtitle" class="overflow">{{article?.createdTime | time('simple')}}</div>
       </div>
       <!-- 内容 -->
       <div id="content">
           <img  :src="article.createdCover"  class="image">
           <div class="name overflow">{{article.title}}</div>
           <div class="fun flex">
               <button class="funOne flex" v-for="(fun,index) in funData" :key="index" :style="getFunStyle(fun)">
                     <font-awesome-icon  :icon="fun.icon" class="icon" @click.stop="beforeClick(fun)"/>
                     <div v-if="fun.value">{{fun.value | count}}</div>
               </button>
           </div>
       </div>
       
   </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
  export default 
  {
     name :'', 
     props:['article'],
     data() {
      return {
           funData:[
                {label:'点赞',icon:'heart',value:0,color:'red',state:0,click:this.LikeCollect_,type:'like',time:0},
                {label:'收藏',icon:'star',value:0,color:'orange',state:0,click:this.LikeCollect_,type:'collect',time:0},
                {label:'评论',icon:'pen-to-square',color:'skyblue',state:0,click:null,time:0},
            ]
      }
     },
     computed:{
       ...mapState('Login',['User']),
     },
     created() {
       this.init()
     },
     methods: {
       ...mapActions('Article',['LikeCollect']), //点赞收藏 删除

      init(){ //初始化
        this.funData[0].value = this.article?.extra?.likecount
        this.funData[0].state = this.article?.extra?.likestate
        this.funData[1].value = this.article?.extra?.collectcount
        this.funData[1].state = this.article?.extra?.collectstate

      },
      TimeKeeping(fun){ //计时
           clearTimeout(this.timer)
           this.timer = setTimeout(() => {
               fun.time = 0
               clearTimeout(this.timer)
             }, 5000);
        },
      //点赞收藏
      async  LikeCollect_(fun){
            let type = fun.type
            let uid = this.User?.uid || 0
            let id = this.article?.id || 0
            let res = await this.LikeCollect({id,uid,type})
            if(res.code == 200){
                 this.$message.success(res.message)
                 fun.state = res.data.state
                 fun.value = res.data.count
                 let key = fun.type == 'like' ? 'likecount' : 'collectcount'
                 this.article.extra[key] = res.data.count
            }
            else if(res.code == -1){
               return this.$public.toLogin()
            }
            else this.$message.error(res.message)
      },     
      beforeClick(fun){
        if(fun.click == null) return this.$message.warning('功能暂未实现')
        this.TimeKeeping(fun)
        if(fun.time >= 3) return this.$message.warning('请勿频繁操作')
        fun.time += 1
        fun.click(fun)

      },
      getFunStyle({state,color}){
         if(state) return {color}
      },
       ToArticleDetail(id){
            this.$router.push({path:'/articleDetail', query: {id} })
         },
     },
  
  }
</script>
<style scoped lang="less">

#Card{
   width: 100%;
   padding: 10px;
   box-shadow: var(--BoxShadow);
   box-sizing: border-box;
   border-radius: 5px;
   background: var(--Pattern);
   font-size: 14px;
}
#Head{
    width: 100%;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    color: var(--fontColor);
}
#title{
    text-align: left;
    width: 50%;
}
#subtitle{
    text-align: right;
    width: 50%;
    font-size: 10px;
}

.image{
   width: 100%;
   height: 200px;
   border-radius: 5px;
   margin: 10px 0;
   border: 1px solid #efefef;
}

#content{
   width: 100%;
   padding: 10px 20px;
   box-sizing: border-box;

   .name{
      color: var(--fontColor);
   }
}

.fun{
   margin-top: 10px;
   width: 100%;
   height: 20px;
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;

   .funOne{
      font-size: 18px;
      color:gray;
      flex-wrap: nowrap;
   }

   .icon{
      margin-right: 5px;
   }
}
</style>